<template>
    <div class="dashboard">
        <div class="row">
            <div class="col-sm-12">
                <div class="white-box">
                    <div class="row row-in">
                        <div class="col-lg-3 col-sm-6 row-in-br">
                            <ul class="col-in">
                                <li>
                                    <span class="circle circle-md bg-danger">
                                        <i class="fif fif-home"></i>
                                    </span>
                                </li>
                                <li class="col-last">
                                    <h3 style="font-size: 24px" class="counter text-right m-t-15">{{dash.room_overview.physicalroom}}</h3>
                                </li>
                                <li class="col-middle">
                                    <h4>Physical Room</h4>
                                </li>
                            </ul>
                        </div>
                        <div class="col-lg-3 col-sm-6 row-in-br  b-r-none">
                            <ul class="col-in">
                                <li>
                                    <span class="circle circle-md bg-info"><i class="fif fif-house"></i></span>
                                </li>
                                <li class="col-last">
                                    <h3 style="font-size: 24px" class="counter text-right m-t-15">{{dash.room_overview.logicalroom}}</h3>
                                </li>
                                <li>
                                    <h4>Logical Room</h4>
                                </li>
                            </ul>
                        </div>
                        <div class="col-lg-3 col-sm-6 row-in-br">
                            <ul class="col-in">
                                <li>
                                    <span class="circle circle-md bg-success"><i class="fif fif-order"></i></span>
                                </li>
                                <li class="col-last">
                                    <h3 style="font-size: 24px" class="counter text-right m-t-15">{{dash.room_overview.today_order}}</h3>
                                </li>
                                <li>
                                    <h4>Order Today</h4>
                                </li>
                            </ul>
                        </div>
                        <div class="col-lg-3 col-sm-6  b-0">
                            <ul class="col-in">
                                <li>
                                    <span class="circle circle-md bg-warning"><i class="fif fif-cny"></i></span>
                                </li>
                                <li class="col-last">
                                    <h3 style="font-size: 24px" class="counter text-right m-t-15">
                                        {{dash.room_overview.today_sale.toFixed(0) + ' JPY'}}</h3>
                                </li>
                                <li>
                                    <h4>Sales Today</h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-5">
                <div class="white-box" style="position: relative;" v-if="dash.deal_12m">
                    <loading :show="loading"></loading>
                    <chart :x="dash.deal_12m.x" :y="dash.deal_12m.y" className="deal_12m" title="历月交易数据"></chart>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="white-box"  style="position: relative;" v-if="dash.deal_24h">
                    <loading :show="loading"></loading>
                    <chart :x="dash.deal_24h.x" :y="dash.deal_24h.y" className="deal_24h" title="24小时交易数据"></chart>
                </div>
            </div>
            <div class="col-lg-2" v-if="dash.deal_ring_m">
                <div class="white-box" style="position: relative;">
                    <loading :show="loading"></loading>
                    <ul class="country-state  p-t-20">
                        <li>
                            <h3 style="overflow: hidden;text-overflow: ellipsis;">{{dash.deal_ring_m.sale.value | decimalTwo | appendVal('JPY')}}</h3>
                            <small>交易额总和</small>
                            <div class="pull-right">
                                {{dash.deal_ring_m.sale.rate | decimalTwo('percent')}}
                                <span class="text-success">
                                    <i class="fif"
                                       :class="{'fif-level-down text-danger': String(dash.deal_ring_m.sale.rate).indexOf('-') != -1,
                                                'fif-level-up': String(dash.deal_ring_m.sale.rate).indexOf('-') == -1}"></i>
                                </span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50"
                                     aria-valuemin="0" aria-valuemax="100"
                                     :style="{width: FKTransferToPercent(dash.deal_ring_m.sale.rate).replace('-', '')}">
                                </div>
                            </div>
                        </li>
                        <li>
                            <h3>{{dash.deal_ring_m.total_mail.value}}</h3>
                            <small>信息量总和</small>
                            <div class="pull-right">{{dash.deal_ring_m.total_mail.rate | decimalTwo('percent')}}
                                <span class="text-success">
                                    <i class="fif"
                                       :class="{'fif-level-down text-danger': String(dash.deal_ring_m.total_mail.rate).indexOf('-') != -1,
                                                'fif-level-up': String(dash.deal_ring_m.total_mail.rate).indexOf('-') == -1}"></i>
                                </span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-inverse" role="progressbar" aria-valuenow="50"
                                     aria-valuemin="0" aria-valuemax="100"
                                     :style="{width: FKTransferToPercent(dash.deal_ring_m.total_mail.rate)}">
                                </div>
                            </div>
                        </li>
                        <li>
                            <h3>{{dash.deal_ring_m.physical_room.value}}</h3>
                            <small>本月房源数</small>
                            <div class="pull-right">
                                {{dash.deal_ring_m.physical_room.rate | decimalTwo('percent')}}
                                <span class="text-success">
                                   <i class="fif"
                                      :class="{'fif-level-down text-danger': String(dash.deal_ring_m.physical_room.rate).indexOf('-') != -1,
                                                'fif-level-up': String(dash.deal_ring_m.physical_room.rate).indexOf('-') == -1}"></i>
                                </span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50"
                                     aria-valuemin="0" aria-valuemax="100"
                                     :style="{width: FKTransferToPercent(dash.deal_ring_m.physical_room.rate)}">
                                </div>
                            </div>
                        </li>
                        <li>
                            <h3>{{dash.deal_ring_m.guest_num.value}}</h3>
                            <small>接待客人数</small>
                            <div class="pull-right">{{dash.deal_ring_m.guest_num.rate | decimalTwo('percent')}}
                                <span class="text-success">
                                    <i class="fif"
                                       :class="{'fif-level-down text-danger': String(dash.deal_ring_m.guest_num.rate).indexOf('-') != -1,
                                                ' fif-level-up': String(dash.deal_ring_m.guest_num.rate).indexOf('-') == -1}"></i>
                                </span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
                                     aria-valuemin="0" aria-valuemax="100"
                                     :style="{width: FKTransferToPercent(dash.deal_ring_m.guest_num.rate)}">
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4">
                <div class="white-box" v-if="dash.last_order_7" style="position: relative;">
                    <loading :show="loading"></loading>
                    <chart :x="dash.last_order_7.x" :y="dash.last_order_7.y" className="last_order_7" title="每日订单量走向"
                           type=""></chart>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="white-box" v-if="dash.lasest_order_7" style="position: relative;">
                    <loading :show="loading"></loading>
                    <chart :x="dash.lasest_order_7.x" :y="dash.lasest_order_7.y" className="lasest_order_7"
                           title="未来入住走向" type=""></chart>
                </div>
            </div>
            <div class="col-lg-4 col-sm-12 col-xs-12" v-if="dash.avg_business_ring_m">
                <div class="row">
                    <div class="col-lg-6 col-sm-6 col-xs-12">
                        <div class="white-box" style="position: relative;">
                            <loading :show="loading"></loading>
                            <h3 class="box-title">平均咨询</h3>
                            <div class="text-right">
                                <h2><sup class="text-success">
                                    <i class="fif" :class="{'fif-arrow-down-right2 text-danger': String(dash.avg_business_ring_m.inquiry_mail.rate).indexOf('-') != -1,
                                                                            'fif-arrow-up-right2': String(dash.avg_business_ring_m.inquiry_mail.rate).indexOf('-') == -1}"></i></sup>
                                    {{dash.avg_business_ring_m.inquiry_mail.value | decimalTwo}}
                                </h2>
                            </div>
                            <span class="text-success">
                                <div><span class="text-muted">环比上月同期</span></div>
                                {{dash.avg_business_ring_m.inquiry_mail.rate | decimalTwo('percent')}}
                            </span>
                            <div class="progress m-b-0">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50"
                                     aria-valuemin="0" aria-valuemax="100"
                                     :style="{width: FKTransferToPercent(dash.avg_business_ring_m.inquiry_mail.rate)}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-xs-12">
                        <div class="white-box" style="position: relative;">
                            <loading :show="loading"></loading>
                            <h3 class="box-title">平均订单</h3>
                            <div class="text-right">
                                <h2><sup class="text-success"><i class="fif"
                                                                 :class="{'fif fif-arrow-down-right2 text-danger': String(dash.avg_business_ring_m.order.rate).indexOf('-') != -1,
                                                                            ' fif-arrow-up-right2': String(dash.avg_business_ring_m.order.rate).indexOf('-') == -1}"></i></sup>
                                    {{dash.avg_business_ring_m.order.value | decimalTwo}}
                                </h2>
                            </div>
                            <span class="text-danger">
                                <div><span class="text-muted">环比上月同期</span></div>
                                {{dash.avg_business_ring_m.order.rate | decimalTwo('percent')}}
                            </span>
                            <div class="progress m-b-0">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50"
                                     aria-valuemin="0" aria-valuemax="100"
                                     :style="{width: FKTransferToPercent(dash.avg_business_ring_m.order.rate)}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-xs-12">
                        <div class="white-box" style="position: relative;">
                            <loading :show="loading"></loading>
                            <h3 class="box-title">平均金额</h3>
                            <div class="text-right">
                                <h2><sup class="text-success"><i class="fif"
                                                                 :class="{'fif-arrow-down-right2 text-danger': String(dash.avg_business_ring_m.sale.rate).indexOf('-') != -1,
                                                                        ' fif-arrow-up-right2': String(dash.avg_business_ring_m.sale.rate).indexOf('-') == -1}"></i></sup>
                                    {{dash.avg_business_ring_m.sale.value | decimalTwo | appendVal(' JPY')}}
                                </h2>
                            </div>
                            <span class="text-info">
                                <div><span class="text-muted">环比上月同期</span></div>
                                {{dash.avg_business_ring_m.sale.rate | decimalTwo('percent')}}
                            </span>
                            <div class="progress m-b-0">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50"
                                     aria-valuemin="0" aria-valuemax="100"
                                     :style="{width: FKTransferToPercent(dash.avg_business_ring_m.sale.rate)}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-xs-12">
                        <div class="white-box" style="position: relative;">
                            <loading :show="loading"></loading>
                            <h3 class="box-title">平均订单信息量</h3>
                            <div class="text-right">
                                <h2><sup class="text-success"><i class="fif"
                                                                 :class="{'fif-arrow-down-right2 text-danger': String(dash.avg_business_ring_m.total_mail.rate).indexOf('-') != -1,
                                                                           'fif-arrow-up-right2': String(dash.avg_business_ring_m.total_mail.rate).indexOf('-') == -1 }"></i></sup>
                                    {{dash.avg_business_ring_m.total_mail.value | decimalTwo}}
                                </h2>
                            </div>
                            <span class="text-inverse">
                                <div><span class="text-muted">环比上月同期</span></div>
                                {{dash.avg_business_ring_m.total_mail.rate | decimalTwo('percent')}}
                            </span>
                            <div class="progress m-b-0">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50"
                                     aria-valuemin="0" aria-valuemax="100"
                                     :style="{width: FKTransferToPercent(dash.avg_business_ring_m.total_mail.rate)}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-5" v-if="dash.physical_room_type_distribution">
                <div class="white-box" style="position: relative;">
                    <loading :show="loading"></loading>
                    <chart className="physical_room_type_distribution" :y="dash.physical_room_type_distribution.data"
                           type="" title="房源类型占比图"></chart>
                </div>
            </div>
            <div class="col-md-7" v-if="dash.physicalroom_area_distribution">
                <div class="panel" style="position: relative;">
                    <loading :show="loading"></loading>
                    <div class="p-20">
                        <div class="row">
                            <div class="col-xs-8">
                                <h4 class="m-b-0">Total Physical Room</h4>
                            </div>
                            <div>
                                <h3 class="m-t-0 font-medium text-right p-r-10">{{totalPhysicalRoom}}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="panel-footer bg-extralight">
                        <ul class="earning-box">

                            <li :key="'area' + key"  v-for="(value, key) in dash.physicalroom_area_distribution">
                                <div class="er-row">
                                    <!--<div class="er-pic"><img src="@/static/img/users/genu.jpg" alt="varun" width="60" class="img-circle"></div>-->
                                    <div class="er-text">
                                        <h3>{{key}}</h3></div>
                                    <div class="er-count"><span class="counter">{{value}}</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" v-if="dash.latest_orders">
            <div class="col-md-12">
                <div class="white-box" style="position: relative;">
                    <loading :show="loading"></loading>
                    <h3 class="box-title">Latest Orders</h3>
                    <div class="row sales-report">
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <h2>{{now}}</h2>
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-6 ">
                            <h1 class="text-right text-info m-t-20">{{dash.latest_orders.total + ' JPY'}}</h1>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th :key="'orderheader' + index"  v-for="(header, index) in dash.latest_orders.headers">{{header}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr :key="'order' + rowIndex"  v-for="(order, rowIndex) in dash.latest_orders.data">
                                <td>{{rowIndex + 1}}</td>
                                <td :key="'ordercol' + colIndex"  v-for="(header, colIndex) in dash.latest_orders.headers">
                                        <span v-if="header == 'status'">
                                            <span class="label label-info label-rouded" v-if="order[colIndex]=='other'">{{order[colIndex]}}</span>
                                            <span class="label label-danger label-rouded"
                                                  v-else-if="order[colIndex]=='today'">{{order[colIndex]}}</span>
                                            <span class="label label-success label-rouded"
                                                  v-else="">{{order[colIndex]}}</span>
                                        </span>
                                    <span v-else=""> {{order[colIndex]}}</span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    //components
    import Chart from '@/components/widgets/Chart/Chart'
    import Loading from '@/components/widgets/Loading'
    import {dashboard} from "@/api/stat"
    import gridLightTheme from '@/static/js/theme/chart/grid-light'
    //import moment from 'moment'

    export default {
        name: "Dashboard",
        components: {Loading, Chart},
        created() {
            this.now = moment().format("dddd, MMMM Do YYYY")
            this.dash.deal_ring_m = {
                "guest_num": {"rate": 0, "value": 0},
                "total_mail": {"rate": 0, "value": 0},
                "sale": {"rate": 0, "value": 0},
                "physical_room": {"rate": 0, "value": 0}
            }
            this.dash.physical_room_type_distribution = {
                "share": 0,
                "1dk": 0,
                "2ldk": 0,
                "studio": 0,
                "others": 0,
                "3ldk": 0
            }
            if (this.dash.physical_room_type_distribution) {
                let tmp = {
                    'type': 'pie',
                    'name': '物理房源类型占比',
                    'data': []
                }
                for (let key in this.dash.physical_room_type_distribution) {
                    if (key == 'share') {
                        tmp.data.push({
                            name: key,
                            y: this.dash.physical_room_type_distribution[key],
                            sliced: true,
                            selected: true
                        },)
                    } else {
                        tmp.data.push([key, this.dash.physical_room_type_distribution[key]])
                    }

                }
                this.dash.physical_room_type_distribution.data = [tmp]
            }
            this.dash.physicalroom_area_distribution= {"Osaka": 0, "others": 0, "Tokyo": 0, "Bangkok": 0}
            this.dash.avg_business_ring_m = {
                "total_mail": {"rate": 0, "value": 0},
                "sale": {"rate": 0, "value": 0},
                "order": {"rate": 0, "value": 0},
                "inquiry_mail": {"rate": 0, "value": 0},
            }
            this.dash.latest_orders = {
                total: 0,
                headers: [],
                data: []
            }
        },
        deactivated() {
            this.$store.state.cancelToken.cancel()
        },
        activated() {
            // 请求数据
            this.loading = true
            dashboard().then(res => {
                this.loading = false
                if (res.data.room_overview) {
                    this.dash.room_overview = res.data.room_overview
                }
                if (res.data.physicalroom_area_distribution) {
                    for (let key in res.data.physicalroom_area_distribution) {
                        this.totalPhysicalRoom  += res.data.physicalroom_area_distribution[key]
                    }
                    this.dash.physicalroom_area_distribution = res.data.physicalroom_area_distribution
                }
                if (res.data.deal_ring_m) {
                    this.dash.deal_ring_m = res.data.deal_ring_m
                }
                if (res.data.avg_business_ring_m) {
                    this.dash.avg_business_ring_m = res.data.avg_business_ring_m
                }
                // 历月交易
                if (res.data.deal_12m) {
                    this.dash.deal_12m.x = res.data.deal_12m.x
                    let tmp = [
                        {name: '12月信息量', data: [], yAxis:0},
                        {name: '12月销售额', data: [], yAxis:1}
                    ]
                    tmp[0].data = res.data.deal_12m.mail
                    tmp[1].data = res.data.deal_12m.order
                    this.dash.deal_12m.y = tmp
                }
                // 24小时交易
                if (res.data.deal_24h) {
                    this.dash.deal_24h.x = res.data.deal_24h.x
                    let tmp = [
                        {name: '24小时信息量', data: [], yAxis:0},
                        {name: '24小时销售额', data: [], yAxis:1}
                    ]
                    tmp[0].data = res.data.deal_24h.mail
                    tmp[1].data = res.data.deal_24h.order
                    this.dash.deal_24h.y = tmp
                }
                // 过去七天的订单数
                if (res.data.last_order_7) {
                    this.dash.last_order_7.x = res.data.last_order_7.x
                    let tmp = [{
                        name : '订单数',
                        data: []
                    }]
                    tmp[0].data = res.data.last_order_7.order_count
                    this.dash.last_order_7.y = tmp
                }

                // 未来7天的订单数
                if (res.data.lasest_order_7) {
                    this.dash.lasest_order_7.x = res.data.lasest_order_7.x
                    let tmp = [{
                        name : '订单数',
                        data: []
                    }]
                    tmp[0].data = res.data.lasest_order_7.order_count
                    this.dash.lasest_order_7.y = tmp
                }

                if (res.data.physical_room_type_distribution) {
                    let tmp = {
                        'type': 'pie',
                        'name': '物理房源类型占比',
                        'data': []
                    }
                    for (let key in res.data.physical_room_type_distribution) {
                        if (key == 'share') {
                            tmp.data.push({
                                name: key,
                                y: res.data.physical_room_type_distribution[key],
                                sliced: true,
                                selected: true
                            },)
                        } else {
                            tmp.data.push([key, res.data.physical_room_type_distribution[key]])
                        }

                    }
                    this.dash.physical_room_type_distribution.data = [tmp]
                }

                if (res.data.latest_orders) {
                    res.data.latest_orders.data.forEach(item => {
                        let price = parseInt(item[2].replace(/[^0-9.]/ig, ""))
                        this.dash.latest_orders.total += isNaN(price) ? 0 : price
                    })
                    this.dash.latest_orders.data = res.data.latest_orders.data
                    this.dash.latest_orders.headers = res.data.latest_orders.headers
                }
            }).catch (e => {this.loading = false})
        },
        data() {
            return {
                loading: false,
                totalPhysicalRoom: 0,
                dash: {
                    deal_24h: {
                        x: [],
                        y: [
                            {name: '24小时信息量', data: [], yAxis:0},
                            {name: '24小时销售额', data: [], yAxis:1},
                        ]
                    },
                    deal_12m: {
                        x: [],
                        y: [
                            {name: '12月信息量', data: [], yAxis:0},
                            {name: '12月销售额', data: [], yAxis:1},
                        ]
                    },
                    lasest_order_7: {
                        x: [],
                        y: [{
                            name: '订单数',
                            data: []
                        }]
                    },
                    last_order_7: {
                        x: [],
                        y: [{
                            name: '订单数',
                            data: []
                        }]
                    },
                    physicalroom_area_distribution: null,
                    room_overview: {
                        logicalroom: 0,
                        physicalroom: 0,
                        today_order: 0,
                        today_sale: 0
                    },
                    deal_ring_m: null,
                    physical_room_type_distribution: null,
                    latest_orders: null,
                    avg_business_ring_m: null,
                    stat: null,
                },
            }
        },
    }
</script>

<style scoped lang="stylus">
    .dashboard
        .col-in
            h3
                font-size: 30px;
                font-weight: 100;
            li.col-middle
                width: 50%

</style>